<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
                border: 2px solid #333;
                width: 100px;
                height: 100px;
                /* 第一种方法 弹性盒 */
                /* display: flex;
                align-items: center;
                justify-content: center; */

                /* 第二种方法  父组件相对定位*/
                /* position: relative; */

                

              }
        .test {
              width: 40px;
              height: 40px;
              background-color: pink;
              /* 子组件绝对定位 */
              /* position: absolute;
              left: 30%;
              top: 30%; */

              
            /* 第三种方法 */
              /* margin-left: 30%;
              margin-top: 30%;
               */
            
         }
    </style>
        
        
</head>
<body>
    <div class="parent">
        <div class="test"></div>
      </div>
    
</body>
</html>